<template>
  <div class="example">
    <div id="flip-list-demo" class="demo">
      <transition-group name="flip-list" tag="ul">
        <li v-for="item in items" v-bind:key="item">
          {{ item }}
        </li>
      </transition-group>
    </div>
    <div class="btn">
      <button v-on:click="shuffle">Shuffle</button>
    </div>
  </div>
</template>

<script>
/**
 * 例子 - 列表过渡 - 排序过渡
 */

/**
 * 动态加载JavaScript
 */
function loadJS(url) {
  const script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = url;
  document.getElementsByTagName('head')[0].appendChild(script);
}

export default {
  data() {
    return {
      items: [1,2,3,4,5,6,7,8,9]
    }
  },
  created() {
    loadJS('https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js');
  },
  methods: {
    shuffle: function () {
      this.items = _.shuffle(this.items)
    }
  }
}
</script>

<style lang="less" scoped>
.flip-list-move {
  transition: transform 1s;
}
</style>
